<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../style/fjol_style.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">首付</h1>
		</header>
		<div class="mui-content">
		    <ul class="mui-table-view">
		            <li class="mui-table-view-cell" id="downPayment">

		                    首付
		                    <div class="mui-input-row mui-pull-right p0">

		                        <input type="number" id="downPaymentIpt" class="mui-text-right" placeholder="" value="" style="width: auto; padding: 0; border: none; height: auto; margin: 0;">万
		                    </div>
		                    

		            </li>
		        </ul>
		        
		    <div class="mui-scroll-wrapper" style="top: 110px;">
		        <div class="mui-scroll">
		            <!--这里放置真实显示的DOM内容-->
		            <ul class="mui-table-view done-rate-list">
		                    <li class="mui-table-view-cell">
		                            一成
		                    </li>
		                    <li class="mui-table-view-cell">
		                             二成
		                    </li>
		                    <li class="mui-table-view-cell">
		                            三成
		                    </li>
		                    <li class="mui-table-view-cell">
		                            四成
		                    </li>
		                    <li class="mui-table-view-cell">
		                             五成
		                    </li>
		                    <li class="mui-table-view-cell">
		                            六成
		                    </li>
		                    <li class="mui-table-view-cell">
		                            七成
		                    </li>
		                    <li class="mui-table-view-cell">
		                             八成
		                    </li>
		                    <li class="mui-table-view-cell">
		                            九成
		                    </li>
		                </ul>
		                
		        </div>
		    </div>
		    
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
                var wv = plus.webview.currentWebview();
                var donePay = wv.donePay;
                var allPay = wv.allPay;
//              console.log(donePay);
                document.querySelector('#downPaymentIpt').value = donePay;
                var doneIpt = document.querySelector('#downPaymentIpt').value;
                var iptTxt = Math.round(allPay/doneIpt);
            
	            var cellList = mui('.done-rate-list .mui-table-view-cell');

	            for(var i=0; i<cellList.length; i++){
	            	cellList[i].index = i;				//赋 index
	            }
	            
	            var personPage = plus.webview.getWebviewById('fj_mortgage');

	            	cellList.each(function(){
		            	this.addEventListener('tap',function(){
		            		var idx = this.index;
		            		var txt = this.innerHTML;
		            		var donepay = parseInt(allPay *(idx+1)/10);
		            		
		            		mui.fire(personPage,'changeDonePay',{
		            			donepay:donepay,
		            			txt:txt
		            		});
		            		mui.back();
		            	});
		            });
		            
		            document.querySelector('.mui-action-back').addEventListener('tap',function(){
//		            	console.log(2);
		            	var doneIpt = document.querySelector('#downPaymentIpt').value;
		        	var numTxt = Math.round(doneIpt/allPay*10);
		        	var txt;
		        	switch(numTxt){
		        		case 1:
		        			txt = "一成";break;
		        		case 2:
		        			txt = "二成";break;
		        		case 3:
		        			txt = "三成";break;
		        		case 4:
		        			txt = "四成";break;
		        		case 5:
		        			txt = "五成";break;
		        		case 6:
		        			txt = "六成";break;
		        		case 7:
		        			txt = "七成";break;
		        		case 8:
		        			txt = "八成";break;
		        		case 9:
		        			txt = "九成";break;
		        		default:
		        			txt = "全款";
		        			doneIpt = allPay;
		        			break;
		        		
		        	}
		        	mui.fire(personPage,'changeDonePay',{
		            			donepay:doneIpt,
		            			txt:txt
		            		});
		            });
		        	
             });



            	
		</script>
	</body>

</html>